<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>

    <div id="in-transitions1">
        <transition name="fade">
          <span v-if="toggle1" v-t.preserve="'preserve1'"></span>
        </transition>
        <button @click="toggle1 = !toggle1">Toggle1</button>
    </div>

    <div id="in-transitions2">
        <transition name="fade">
          <span v-if="toggle2" v-t="'preserve2'"></span>
        </transition>
        <button @click="toggle2 = !toggle2">Toggle2</button>
    </div>

    <div id="app1">
        <i18n path="term" tag="label" for="tos">
          <a :href="url" target="_blank">{{ $t('tos') }}</a>
        </i18n>
    </div>

    <script>
        new Vue({
            i18n: new VueI18n({
                locale: 'en',
                messages: {
                en: { preserve1: 'with preserve' },
                }
            }),
            data: { toggle1: true }
        }).$mount('#in-transitions1')

        new Vue({
            i18n: new VueI18n({
                locale: 'en',
                messages: {
                    en: { preserve2: 'with preserve' },
                },
                preserveDirectiveContent: true
            }),
            data: { toggle2: true }
        }).$mount('#in-transitions2')

        const messages = {
            en: {
                tos: 'Term of Service',
                term: 'I accept xxx {0}.'
            },
            ja: {
                tos: '利用規約',
                term: '私は xxx の{0}に同意します。'
            }
        }

        let i18n = new VueI18n({
            locale: 'en',
            messages
        })
        new Vue({
            i18n,
            data: {
                url: 'https://m.baidu.com'
            }
        }).$mount('#app1')
        i18n = null
    </script>
</body>
</html>